import React, {useRef} from 'react';
import {TouchableWithoutFeedback, PanResponder} from 'react-native';

const Touchable = ({onPress, onPressOut, ...rest}) => {
  const pressStartTime = useRef(0);

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pressStartTime.current = Date.now();
      },
      onPanResponderRelease: (_, {changedTouches}) => {
        const pressDuration = Date.now() - pressStartTime.current;
        onPress &&
          onPress(
            changedTouches[0].pageX,
            changedTouches[0].pageY,
            pressDuration,
          );
      },
    }),
  ).current;

  return (
    <TouchableWithoutFeedback {...rest} {...panResponder.panHandlers}>
      {rest.children}
    </TouchableWithoutFeedback>
  );
};

export default Touchable;
